<template>
  <el-main class="marginL20 jamenlist" ref="all">
    <el-container direction="vertical">
      <!-- <el-row type="flex" class="row-bg" justify="center" ref="top1">
        <el-col :span="3">
          <a href="http://www.jamonapi.com"><img src="../assets/images/jamon_banner3.jpg" id="monLink" border="0" style="width:80px;height:25px;margin-bottom:5px;"/></a>
        </el-col>
      </el-row> -->
      <el-row type="flex" class="row-bg" justify="space-between" ref="top1">
        <el-col :span="12" >
          <!-- <span @click="onExit">home</span> -->
          <p>JAMon - Administration/Reporting - {{nowData}}  </p>
        </el-col>
        <el-col :span="8" style="text-align:right">
          <span class="miniFontSize">{{$t('is_open_monitoring')}}</span>
          <el-switch
            v-model="enableAll"
            active-value="EnableMonitoring"
            inactive-value="DisableMonitoring"
            class="marginRight20">
          </el-switch>
          <el-button @click="onExit" size="small" type="primary" plain>{{$t('exit')}}</el-button>
        </el-col>
      </el-row>
      <el-form label-position="top" size="mini" ref="top3">
        <el-row ref="top2">
          <!-- style="display:flex;justify-content: space-between;"  -->
          <el-col :span="2" >
            <el-form-item label="JAMon Action"  class="smallFontSize">
              <el-select v-model="searchData.action" :placeholder="$t('placeholder_select')" >
                <el-option
                  :label="$t('placeholder_select')"
                  value="">
                </el-option>
                <el-option
                  v-for="item in actionOption"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3" >
            <el-form-item label="Mon Proxy Action"  class="smallFontSize">
              <el-select v-model="searchData.monProxyAction" :placeholder="$t('placeholder_select')" >
                <el-option
                  :label="$t('placeholder_select')"
                  value="">
                </el-option>
                <el-option
                  v-for="item in monProxyActionOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2" >
            <el-form-item label="Output"  class="smallFontSize " >
              <el-select v-model="searchData.outputTypeValue" :placeholder="$t('placeholder_select')">
                <el-option
                  :label="$t('placeholder_select')"
                  value="">
                </el-option>
                <el-option
                  v-for="item in outputTypeValueOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2" >
            <el-form-item label="Range/Units"  class="smallFontSize">
              <el-select v-model="searchData.RangeName" :placeholder="$t('placeholder_select')">
                <el-option
                  :label="$t('placeholder_select')"
                  value="">
                </el-option>
                <el-option
                  v-for="item in RangeNameOption"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2" >
            <el-form-item label="Display Columns"  class="smallFontSize">
              <el-select v-model="searchData.displayTypeValue" :placeholder="$t('placeholder_select')">
                <el-option
                  :label="$t('placeholder_select')"
                  value="">
                </el-option>
                <el-option
                  v-for="item in displayTypeValueOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2" >
            <el-form-item label="Cell Format" class="smallFontSize">
              <el-select v-model="searchData.formatterValue" :placeholder="$t('placeholder_select')">
                <el-option
                  :label="$t('placeholder_select')"
                  value="">
                </el-option>
                <el-option
                  v-for="item in formatterValueOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2" >
            <el-form-item label="Filter (optional)"  class="smallFontSize">
              <el-input v-model="searchData.ArraySQL"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3" >
            <el-form-item label="Highlight (optional)" class="smallFontSize">
              <el-input v-model="searchData.highlight"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" >
            <el-form-item label="Text Display Size (optional)" class="smallFontSize">
              <el-input v-model="searchData.TextSize" type="number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="1" >
            <el-form-item  class="smallFontSize">
              <el-button @click="jamenAdminClick" class="jamenButton"  type="primary" plain>Go !</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <div ref="list" class="list">
          <table  v-if="haveData">
            <tr>
              <td v-for="(e,i) in listHeader" :key="i" style="text-align:center"  class="sectHead paddingLR10" @click="onSortClick(i+1)">
                <span v-if="i+1==searchData.sortCol"  :class="{'borderLeft':i==0}">
                  <b style="font-weight:normal">{{e}}</b>
                  <i class="el-icon-bottom" v-if="searchData.sortOrder == 'desc' "></i>
                  <i class="el-icon-top" v-if="searchData.sortOrder == 'asc' "></i>
                  

                </span>
                <span v-if="i+1!=searchData.sortCol">
                  <b style="font-weight:normal">{{e}}</b>
                  <i class="el-icon-none" ></i>
                </span>
              </td>
            </tr>
            <tr v-for="(item,index) in jamenAdmin" :key="index"  class="borderBottom ">
              <td v-for="(elm,ind) in item" :key="ind"  :class="{'even':index%2!==0}" class="paddingLR10 borderRight">
                {{elm}}
              </td>
            </tr>
          </table>
          <div v-if="!haveData">
            <p>JAMon is currently disabled.  To enable monitoring you must select 'Enable'</p>
          </div>
        </div>
        
        
      </el-form>
    </el-container>
  </el-main>
</template>

<script>
export default {
  data(){
    return {
      searchData:{
        "action": "",
        "monProxyAction": "",
        "outputTypeValue": "",
        "RangeName": "",
        "displayTypeValue": "",
        "formatterValue": "",
        "ArraySQL": "",
        "highlight": "",
        "TextSize": 0,
        "sortOrder":"asc",
        "sortCol":2,
      },
      enableAll:"EnableMonitoring",
      jamenList:{},
      nowData:"",
      // actionSbmt: "Go !",
      actionOption:[
        {"name":"Refresh"},
        {"name":"ReSet"},
        {"name":"Enable"},
        {"name":"Disable"},
      ],
      monProxyActionOption:[
        {"value":"No Action","label":"No Action (currently=TTTF)"},
        {"value":"Enable All","label":"Enable All"},
        {"value":"Disable All","label":"Disable All"},
        {"value":"Disable SQL","label":"Disable SQL"},
        {"value":"Disable Exceptions","label":"Disable Exceptions"},
        {"value":"Disable Interfaces","label":"Disable Interfaces"},
        {"value":"Enable ResultSet","label":"Enable ResultSet"},

      ],
      outputTypeValueOption:[
        {"value":"html","label":"HTML"},
        {"value":"xml","label":"XML"},
        {"value":"csv","label":"Comma Separated"},
        {"value":"excel","label":"MS Excel"},
      ],
      RangeNameOption:[
        {"name":"AllMonitors"},
        {"name":"ms."},
        {"name":"percent"},
      ],
      displayTypeValueOption:[
        {"value":"RangeColumns","label":"Basic/Range Cols"},
        {"value":"BasicColumns","label":"Basic Cols Only"},
        {"value":"AllColumns","label":"All Cols"},
      ],
      formatterValueOption:[
        {"value":"#,###","label":"#,###"},
        {"value":"#,###.#","label":"#,###.#"},
        {"value":"#,###.##","label":"#,###.##"},
        {"value":"#,###.###","label":"#,###.###"},
        {"value":"#,###.####","label":"#,###.####"},
        {"value":"raw","label":"No Format"},

      ],
      jamenAdmin:{},
      listHeader:[],
      haveData:true,
      listHeight:0,
      currentService:{},
    }
  },
  components:{
  },
  computed:{
    
  },
  props:[
    // "height",
    // "currentService"
  ],
  watch:{
    enableAll(){
      this.changeEnable()
    }
  },
  mounted(){
    let h=document.body.clientHeight-this.$refs.top1.$el.getClientRects()[0].height-this.$refs.top2.$el.getClientRects()[0].height-22;
    this.listHeight = h;
    this.$refs.list.style.height=h+"px"
  },
  created() {
    let queryData = this.$route.query
    this.currentService = JSON.parse(queryData.currentService)
    let data=new Date;
    this.nowData= this.resolvingDate(data)
    this.getData();
    
  },
  methods: {
    onSortClick(i){
      this.searchData.sortCol=i;
      if(this.searchData.sortOrder=="asc"){
        this.searchData.sortOrder="desc"
      }else{
        this.searchData.sortOrder="asc"
      }
      this.getData()
    },
    resolvingDate(date){
      let d = new Date(date);
      let month = (d.getMonth() + 1) < 10 ? '0'+(d.getMonth() + 1) : (d.getMonth() + 1);
      let day = d.getDate()<10 ? '0'+d.getDate() : d.getDate();
      let hours = d.getHours()<10 ? '0'+d.getHours() : d.getHours();
      let min = d.getMinutes()<10 ? '0'+d.getMinutes() : d.getMinutes();
      let sec = d.getSeconds()<10 ? '0'+d.getSeconds() : d.getSeconds();
      let times;
      times=d.getFullYear() + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + sec;
      return times
    },
    changeEnable(){
      //开关数值接口
      let currentService = this.currentService
      this.$api.getjamenList(this.enableAll,currentService,{
        onSucess:resp =>{
          if(resp.data.errcode==0){
            this.jamenList=resp.data.data;
            this.getData()
            this.$forceUpdate();
          }else{
            this.$message({
              showClose: true,
              message: resp.data.errmsg,
              type: "error"
            });
          }
        },
        onError:function(){

        }
      })
    },
    getData(){
      let that=this;
      let currentService = this.currentService
      this.searchData.TextSize=parseInt(this.searchData.TextSize)
      this.$api.getjamenAdmin({
        data:this.searchData
      },currentService,{
        onSucess:resp =>{
          if(resp.data.errcode==0){
            if(!resp.data.data.dataList){
              this.haveData=false;
            }else{
              this.haveData=true;
            }
            this.enableAll =  resp.data.data.isEnabled ? "EnableMonitoring":'DisableMonitoring';
            this.jamenAdmin=resp.data.data.dataList.list;
            this.jamenAdmin.forEach(elm=>{
              elm[12]=that.resolvingDate(elm[12]);
              elm[13]=that.resolvingDate(elm[13]);
            })
            this.listHeader=resp.data.data.dataList.listHeader;
            this.$forceUpdate();
          }else{
            this.$message({
              showClose: true,
              message: resp.data.errmsg,
              type: "error"
            });
          }
        },
        onError:function(){

        }
      })
    },
    onExit(){
      window.close()
      // this.$emit("exit");
    },
    jamenAdminClick(){
      this.getData();
    }
  },
};
</script>
<style lang="scss" scoped>

</style>